﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>花卉数据分析</title>
    <script src="/Apm/js/CMSList.js" type="text/javascript"></script>
    <script src="/js/echarts.js"></script>
    <style>
        .page{
            height:100%;
            overflow-y:auto;
        }
        .view{
            height:400px;
            padding:2rem;
        }
        .toolsbarView {
            display: flex;
            flex-wrap: wrap;
            background-color: #2F4056;
        }
        .FlowerType{
            padding:1rem;
        }
    </style>
</head>
<body>
    <div class="page">
        <div id="FlowerTypeList" class="toolsbarView layui-form">
            <!--<div class="FlowerType">
                <input type="checkbox" title="玫瑰" value="7">
            </div>-->
            
        </div>
        <div id="FlowerView">
            <!--<div id="View7" class="view"></div>-->
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    layui.use('form', function () {
        var form = layui.form;

        //初始化页面
        $.ajax({
            url: ApiURL + 'api/Method/FlowerTypeList?token=' + MyPublic.getToken(),
            type: 'post',
            contentType: 'application/json',
            success: function (data) {
 
                if (data !== null ) {
                    var count = data.length;
                    var flowertypehtml = '';
                    for (var i = 0; i < count; i++) {
                        flowertypehtml += '<div class="FlowerType"><input id="checkbox' + data[i].Id + '" type="checkbox" title="' + data[i].Name + '" value="' + data[i].Id + '"></div>';

                    }
                    $("#FlowerTypeList").append(flowertypehtml);
                    form.render('checkbox'); //更新checkbox

                    /***初始化加载两张图表***/
                    var rows = 2;
                    if (count < 2) {
                        rows = count;
                    }
                    for (var j = 0; j < rows; j++) {
                        GetFlowerInfoData(data[j].Id);

                    }
                }
                
            },
            error: function () {
                location.href = "/error.html";

            }
        });
        //监听checkbox复选
        form.on('checkbox', function (data) {
            
            var id = data.value;
            if (data.elem.checked) {
                
                GetFlowerInfoData(id);
            }
            else {
                $("#View" + id).remove();
            }
           
        });
    });
    /**
     * 花卉数据统计
     * @param id 种类id
     */
    function GetFlowerInfoData(id) {
        layui.use('form', function () {
            var form = layui.form;

            var flowerviewhtml = '<div id="View' + id + '" class="view"></div>';
            $("#FlowerView").append(flowerviewhtml);
            $("#checkbox" + id).attr('checked', true);
            form.render('checkbox'); //更新checkbox
            var myChart = echarts.init(document.getElementById('View' + id));

            $.ajax({
                url: ApiURL + 'api/Method/GetFlowerInfoModel?token=' + MyPublic.getToken(),
                type: 'get',
                contentType: 'application/json',
                data: { id: id },
                success: function (data) {

                    var option = {
                        title: {
                            text: data.title
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: data.Grade
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.TimeList
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: data.ListData
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                },
                error: function () {
                    location.href = "/error.html";

                }
            })
        });

        
    }

    /**
     * 为了切换刷新，每页都要有此函数
     */
    function BindData() {

    }
</script>